import Link from 'next/link'
import { Icon } from 'antd'
import { getLastUpdated } from '../lib/utils'

function getLicense(license) {
  return license ? `${license.spdx_id} license` : ``
}

export default ({ repo }) => {
  // console.log(repo)
  return (
    <div className="root">
      <div className="basic-info">
        <h3 className="repo-title">
          <Link href={`/detail?owner=${repo.owner.login}&name=${repo.name}`}>
            <a>{repo.full_name}</a>
          </Link>
        </h3>
        <p className="repo-desc">{repo.description}</p>
        <p className="other-info">
          {
            repo.license ? (
              <span className="license">{getLicense(repo.license)}</span>
            ) : null
          }
          <span className="last-updated">{getLastUpdated(repo.updated_at)}</span>
          <span className="open-issues">{repo.open_issues_count} open issues</span>
        </p>
      </div>
      <div className="lang-star">
        <span className="lang">{repo.language}</span>
        <span className="stars">
          { repo.stargazers_count } <Icon type="star" theme="filled" />
        </span>
      </div>
      <style jsx>{`
      .root {
        display: flex;
        align-items: flex-start;
      }
      .other-info > span + span {
        margin-right: 10px;
      }
      .root + .root {
        border-top: 1px solid #eee;
        padding-top: 20px;
      }

      .repo-title {
        font-size: 20px;
      }
      .lang-star {
        display: flex;
      }
      .lang-star > span {
        width: 120px;
        text-align: right;
      }
      .repo-desc {
        width: 400px;
      }
      `}</style>
    </div>
  )
}


// export default ({ repo }) => {
//   // console.log(repo)
//   return (
//     <div className="root">
//       <div className="basic-info">
//         <h3 className="repo-title">
//           <Link href={`/detail?owner=facebook&name=react`}>
//             <a>facebook/react</a>
//           </Link>
//         </h3>
//         <p className="repo-desc">A declarative, efficient, and flexible JavaScript library for building user interfaces.</p>
//         <p className="other-info">
//           {/* {
//             repo.license ? (
//               <span className="license">{getLicense(repo.license)}</span>
//             ) : null
//           } */}
//           MIT license
//           {/* {getLastUpdated(repo.updated_at)} */}
//           <span className="last-updated">37 minutes ago</span>
//           {/* {repo.open_issues_count} */}
//           <span className="open-issues">807 open issues</span>
//         </p>
//       </div>
//       <div className="lang-star">
//       {/* {repo.language} */}
//         <span className="lang"> JavaScript </span>
//         <span className="stars">
//         {/* { repo.stargazers_count } */}
//           163786 <Icon type="star" theme="filled" />
//         </span>
//       </div>
//       <style jsx>{`
//       .root {
//         display: flex;
//         align-items: flex-start;
//       }
//       .other-info > span + span {
//         margin-right: 10px;
//       }
//       .root + .root {
//         border-top: 1px solid #eee;
//         padding-top: 20px;
//       }

//       .repo-title {
//         font-size: 20px;
//       }
//       .lang-star {
//         display: flex;
//       }
//       .lang-star > span {
//         width: 120px;
//         text-align: right;
//       }
//       .repo-desc {
//         width: 400px;
//       }
//       `}</style>
//     </div>
//   )
// }